<template>
    <div>
        <table border="1px solid #9B9B9B" cellspacing="0" cellpadding="5" >
            <thead>
                <tr>
                    <td colspan="2">工序</td>
                    <td v-for="item in process" colspan="5">{{ item }}</td>
                </tr>
                <tr>
                    <td>日期</td>
                    <td>班别</td>
                    <td v-for="item in datakey">{{ item.chi }}</td>
                    <td v-for="item in datakey">{{ item.chi }}</td>
                    <td v-for="item in datakey">{{ item.chi }}</td>
                    <td v-for="item in datakey">{{ item.chi }}</td>
                    <td v-for="item in datakey">{{ item.chi }}</td>
                    <td v-for="item in datakey">{{ item.chi }}</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in datalist" >
                    <td>{{ item.month+'月'+item.day+'日' }}</td>
                    <td>{{ item.sailings }}</td>
                    <TableSlot v-for="(pro,index) in process" >
                        <td v-for="keyitem in datakey" >{{ keyitem.eng==='yieldrate'?item[keyitem.eng][index]+'%':item[keyitem.eng][index] }}</td>
                    </TableSlot>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import data from '../components/RawDataTableComponent/mock.js'
import TableSlot from '../components/TableSlot.vue'

const process = ref([])
const datalist = ref('')
const datakey = ref([])

const getDataList = ()=>{
    process.value = data.process
    datakey.value = [...data.datakey]
    datalist.value = [...data.data]
}
getDataList()
</script>

<style scoped>
td{
    min-width: 50px;
    min-height: 25px;
    padding: 5px;
    text-align: center;
    white-space: nowrap;
}
td:hover{
    background-color: rgb(187, 187, 187);
}
tr:hover{
    background-color: rgb(238, 238, 238);
}
thead{
    position: sticky;
    top:0;
    background-color: rgba(213, 213, 213, 0.7);
    backdrop-filter: blur(4px);
}
</style>
